<template>
	<div class="common-layout">
		<el-container style="width: 100%;height: 100%;">
			<!-- 左侧 begin -->
			<el-aside :width="isCollapse ? '60px' : '200px'" class="aside">
				<div class="logo">
					<img class="logoimg" src="../../src/assets/04.png" alt="">
					<h2 style="color: white;margin-top: 20px;">前端系统</h2>
				</div>
				<el-menu default-active="2" unique-opened class="el-menu-vertical-demo" :collapse="isCollapse"
					@open="handleOpen" @close="handleClose" router text-color="white">
					<template v-for="menu in menutree" :key="menu.Id">
						<template v-if="menu.Children.length > 0">
							<el-sub-menu :index="menu.Id + ''">
								<template #title>
									<el-icon>
										<component :is="menu.MenuIcon"></component>
									</el-icon>
									<span>{{ menu.MenuName }}</span>
								</template>
								<el-menu-item-group v-for="chi in menu.Children" :key="chi.Id"
									style="background-color: #242424;">
									<el-menu-item @click="menuSelect(chi)" :index="chi.MenuUrl + ''"><el-icon>
											<component :is="chi.MenuIcon"></component>
										</el-icon>{{ chi.MenuName }}</el-menu-item>
								</el-menu-item-group>
							</el-sub-menu>
						</template>
					</template>
				</el-menu>
			</el-aside>
			<!-- 右侧 end -->
			<el-container>
				<!-- 头部 begin -->
				<el-header class="header">
					<el-row style="height: 60px;">
						<el-col :span="12" style="display: flex;align-items:center;">
							<el-button :icon="Switch" type="info" plain @click="handerCollapse" />
						</el-col>
						<el-col :span="12" class="demo-image__preview">

							<AvatarBar />
						</el-col>
					</el-row>
				</el-header>
				<!-- 头部 end -->

				<!-- 主内容 begin -->
				<el-main class="main">
					<div class="main_div">
						<el-button @click="clear" class="clear">清除</el-button>
						<div class="tab-view">
							<el-tabs v-model="activeTab" type="border-card" @tab-remove="tabRemoveHandle">

								<el-tab-pane :key="item.name" v-for="item in editableTabs" :label="item.title"
									:closable="item.closable" :name="item.Id">
									<router-view></router-view>
								</el-tab-pane>

							</el-tabs>
						</div>


					</div>

				</el-main>
				<!-- 主内容 end -->
			</el-container>
		</el-container>

	</div>
</template>

<script lang="ts" setup>
import { onMounted, ref, watch } from 'vue'
import menuapi from "../api/menuinfoapi"
import {
	Switch
} from '@element-plus/icons-vue'
import AvatarBar from '../components/AvatarBar.vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const menutree: any = ref([])
const tabstable: any = ref([])
const activeTab: any = ref()
const editableTabs: any = ref<Array<any>>([])
menuapi.mymenu().then(res => {
	console.log("mymenu", res.data)
	menutree.value = res.data
	console.log("tabs", menutree.value.Children)
	menutree.value.forEach((item: any) => {
		tabstable.value.push(item.Children)
		console.log("item", tabstable.value)
	})
})
const isCollapse = ref(false)
const handleOpen = (key: string, keyPath: string[]) => {
	console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
	console.log(key, keyPath)
}
const handerCollapse = () => {
	isCollapse.value = !isCollapse.value;
}
onMounted(() => {
	deltab()
	// setTimeout(() => {
	// 	editableTabs.value.push({
	//   title: '首页',
	//   path: '/welcome',
	//   Id:0,
	//   closable:false
	// },)
	// activeTab.value = 0
	// }, 1000);
})

const clear = () => {
	editableTabs.value = []
	editableTabs.value.push({
		title: '首页',
		path: '/welcome',
		Id: 0,
		closable: false
	},)
	activeTab.value = 0
}

const tabdel = ()=>{

}
const menuSelect = (menuItem: any) => {
	if (editableTabs.value.find((t: any) => t.Id == menuItem.Id)) {
		activeTab.value = menuItem.Id
		return
	}
	tabAdd(menuItem)
}
const deltab = () => {
	editableTabs.value = []
	editableTabs.value.push({
		title: '首页',
		path: '/welcome',
		Id: 0,
		closable: false
	},)
	activeTab.value = 0
}
const tabAdd = (menuItem: any) => {
	let tab = editableTabs.value.find((t: any) => t.Id == menuItem.Id)
	if (tab) return

	let newTab = {
		Id: menuItem.Id,
		title: menuItem.MenuName,
		path: menuItem.MenuUrl,
		closable: true
	}
	editableTabs.value.push(newTab)
	activeTab.value = newTab.Id
	console.log("11",activeTab.value);
}

watch(() => activeTab.value, () => {
	let action = editableTabs.value.find((t: any) => t.Id == activeTab.value)
	console.log(action);
	router.push(action.path)
})


const tabRemoveHandle = (tabName: any) => {
	for (let i = 0; i < editableTabs.value.length; i++) {
		const element = editableTabs.value[i];
		if (element.Id == tabName) {
			activeTab.value = (editableTabs.value[i + 1] || editableTabs.value[i - 1]).Id
			editableTabs.value.splice(i, 1)

			return
		}
	}

}

</script>
<style scoped>
.common-layout {
	height: 100vh;
	display: flex;
	flex-direction: column;
	width: 100vw;
}

.aside {
	height: 100%;
	background-color: #242424;
}

.logo {
	height: 80px;

	display: flex;
	align-items: center;
	padding: -2px;

	box-sizing: border-box;
}

.main {
	position: relative;
	background-color: #f1f1f1;
}

.main_div {
	height: 100%;
}

.main_div>div {
	height: 100%;
}

.el-tabs {
	display: flex;
	flex-direction: column;
}

.el-tabs>:last-child {
	flex-grow: 1;
}

.el-tabs>:last-child>div {
	height: 100%;
}

.footer {
	background-color: white;
}

.el-menu-vertical-demo {
	background-color: #242424;

}

.header {
	background-color: white;
}

.logoimg {
	width: 80px;
	height: 80px;
	margin-left: -15px;
}

.el-sub-menu :hover {
	color: black
}

.demo-image__preview {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	padding-right: 80px;
	margin-top: 10px;
}

.clear {
	position: absolute;
	top: 24px;
	right: 24px;
	z-index: 999;
	background-color: rgb(100, 152, 234);
}
</style>